const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyPlugin = require("copy-webpack-plugin")
const toml = require('toml')
const yaml = require('yamljs')
const json5 = require('json5')

module.exports = {
  entry: {
    // 'js/jquery': 'jquery',
    // 'js/lodash': 'lodash',
    'js/app': './src/index.js'
  },

  resolve: {
    extensions: ['.js', '.json', '.jsx', '.vue'],
    alias: {
      '@': path.resolve(__dirname, '../src'),
    },
  },

  module: {
    rules: [
      {
        test: /\.(jsx|js)?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.toml$/i,
        type: 'json',
        parser: {
          parse: toml.parse,
        },
      },
      {
        test: /\.yaml$/i,
        type: 'json',
        parser: {
          parse: yaml.parse,
        },
      },
      {
        test: /\.json5$/i,
        type: 'json',
        parser: {
          parse: json5.parse,
        },
      },
      {
        test: /\.styl$/,
        use: [
          // 'style-loader',
          {
            loader: MiniCssExtractPlugin.loader,
            options: {},
          },
          'css-loader',
          'stylus-loader'
        ]
      },
    ]
  },

  plugins: [
    new CopyPlugin({
      patterns: [
        { 
          from: "./public/", 
          filter: async (resourcePath) => {
            if (resourcePath.includes('.html')) {
              return false
            }
            return true;
          },
        }
      ],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      inject: 'body',
      chunks: ['js/app'],
      filename: 'index.html',
      scriptLoading: 'blocking'
    }),
    // new HtmlWebpackPlugin({
    //   template: './public/index2.html',
    //   inject: 'body',
    //   chunks: ['js/app2'],
    //   filename: 'index2.html'
    // }),
    new VueLoaderPlugin()
  ],

  // externals: {
  //   lodash: 'window._'
  // },

  optimization: {
    splitChunks: {
      chunks: 'async', // async initial all
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
          filename: (pathData) => {
            console.log(pathData)
            // Use pathData object for generating filename string based on your requirements
            return `js/chunk-venders.[contenthash:6].js`;
          }, 
        },
        mytest: {
          test: /components/,
          priority: 1,
          minChunks: 1,
          minSize: 0,
          reuseExistingChunk: true,
          filename: (pathData) => {
            // Use pathData object for generating filename string based on your requirements
            return `js/app.[contenthash:6].js`;
          }, 
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
          // filename: 'js/[name].bundle.js'
        },
      },
    },
  },
}